Vue Cli 中添加 Karma 执行样式相关的单元测试
在最近开发的 ant-violet 开源项目中,使用的是 Vue-cli 自带的测试框架。但是发现在所有跟样式有关的测试用例都无法通过。因为它并不类似于无头浏览器,而是存在于虚拟内存之中。
出现的问题
在如下 button.spec.js
单元测试用例当中,关于 icon 默认的 order
的测试用例无法进行测试,因为它涉及到了样式。前面已经提到由于它处于虚拟内存之中。因此只要进行单元测试,就会出现以下报错。
1 | // button里面的icon样式相关的测试用例 |
解决方案
使用 Karma
打开浏览器进行测试。
配置 package.json
在 package.json
中添加依赖 Karma
相关的配置,如下图。
安装依赖
使用如下命令安装之前 package.json
中添加的依赖。
1 | yarn add -D karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack |
创建 karma.conf.js
在 Vue Cli 3
的官方文档 webpack 相关 章节中,可以查询到 Vue Cli 3
将 webpack.config.js
藏到了一个地方,即 /node_modules/@vue/cli-service/webpack.config.js
。
1 | var webpackConfig = require("@vue/cli-service/webpack.config.js") |
总结
Vue Cli 3 自带测试框架
无法运行和样式相关的测试用例。因为它并不类似于无头浏览器,而是存在于虚拟内存之中。
这些和样式挂钩的测试用例属性,会被认为是 undefined
,因为对于 Vue Cli 3
自带测试框架而言,这些属性本身就是不存在的。因此无法进行测试。
karma 测试运行器
使用 karma
测试运行器之后,关于样式相关的测试用例可以正常进行运行。但也必须要添加 attachToDocument: true
, 属性将元素放置到 DOM
之中。
由于组件的样式相关属性也有单元测试的必要,所以我决定将 karma
测试运行器作为我的默认单元测试框架,因此还需要在 package.json
中设置 "test": "karma start --single-run"
,。以便 travis-ci
进行线上持续集成。